<template>
  <div class="home">
    <h1>Pinia 教程</h1>
    <div class="tutorial-list">
      <h2>基础</h2>
      <router-link to="/intro" class="tutorial-link">认识 Pinia</router-link>
      
      <h2>选项式API</h2>
      <router-link to="/define-store-options" class="tutorial-link">定义 Store (选项式)</router-link>
      <router-link to="/state-options" class="tutorial-link">State (选项式)</router-link>
      <router-link to="/getters-options" class="tutorial-link">Getters (选项式)</router-link>
      <router-link to="/actions-options" class="tutorial-link">Actions (选项式)</router-link>
      
      <h2>组合式API</h2>
      <router-link to="/define-store-composition" class="tutorial-link">定义 Store (组合式)</router-link>
      <router-link to="/state-composition" class="tutorial-link">State (组合式)</router-link>
      <router-link to="/getters-composition" class="tutorial-link">Getters (组合式)</router-link>
      <router-link to="/actions-composition" class="tutorial-link">Actions (组合式)</router-link>
      
      <h2>进阶应用</h2>
      <router-link to="/axios-options" class="tutorial-link">与Axios结合 (选项式)</router-link>
      <router-link to="/weather-app" class="tutorial-link">综合案例 - 天气预报应用</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView'
}
</script>

<style scoped>
.home {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: #2c3e50;
  text-align: center;
}

h2 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: #42b883;
  font-size: 1.5rem;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3rem;
}

.tutorial-list {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tutorial-link {
  display: block;
  padding: 10px 15px;
  color: #2c3e50;
  text-decoration: none;
  border-radius: 4px;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.tutorial-link:hover {
  background-color: #f0f9ef;
  color: #42b883;
}
</style> 